<template>
  <div id="app">
    <!-- 头部 -->
    <van-nav-bar :title="homeInfo.community" class="title">
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>
    <!-- 图片 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in homeInfo" :key="index">
        <img v-lazy="'http://liufusong.top:8080' + item" />
      </van-swipe-item>
    </van-swipe>
    <!-- HouseDetail_info -->
    <div class="HouseDetail_info">
      <van-cell :title="homeInfo.title" :border="false">
        <template #label>
          <van-tag type="success" v-for="(item, i) in homeInfo.tags" :key="i">{{
            item
          }}</van-tag>
        </template>
      </van-cell>
      <van-divider />
      <div class="home-info">
        <div class="info">
          <div>{{ homeInfo.price }}<span>/月</span></div>
          <p>租金</p>
        </div>
        <div class="info">
          <div>{{ homeInfo.roomType }}</div>
          <p>房型</p>
        </div>
        <div class="info">
          <div>{{ homeInfo.size }}平米</div>
          <p>面积</p>
        </div>
      </div>
      <van-divider />
      <div class="home-info-buttom">
        <div class="info-item-div">
          <div class="info-item"><span>装修：</span>精装</div>
          <div class="info-item"><span>楼层：</span>{{ homeInfo.floor }}</div>
        </div>
        <div class="info-item-div">
          <div class="info-item">
            <span>朝向：</span>
            <i v-for="(i, k) in homeInfo.oriented" :key="k">{{ i }}</i>
          </div>
          <div class="info-item"><span>类型：</span>普通住宅</div>
        </div>
      </div>
      <br />

      <van-cell :title="homeInfo.title" />
      <div class="Map"></div>
      <van-cell title="房屋配套" size="large" />
      <ul class="icon-tag">
        <li class="icon" v-for="(i, k) in homeInfo.supporting" :key="k">
          <p>
            <i class="iconfont" :class="icons(i)"></i>
          </p>
          {{ i }}
        </li>
      </ul>

      <div class="HouseDetail_set__26npJ">
        <div class="HouseDetail_houseTitle__3dg6k">房源概况</div>
        <div>
          <div class="HouseDetail_contact__O_lsw">
            <div class="HouseDetail_user__TZj3w">
              <img src="http://liufusong.top:8080/img/avatar.png" alt="头像" />
              <div class="HouseDetail_useInfo__FrBlz">
                <div>王女士</div>
                <div class="HouseDetail_userAuth__Xr6gY">
                  <i class="iconfont icon-auth"></i>已认证房主
                </div>
              </div>
            </div>
            <span class="HouseDetail_userMsg__3mcRl">发消息</span>
          </div>
          <div class="HouseDetail_descText__2JsQA">
            {{ homeInfo.description }}
          </div>
        </div>
      </div>

      <div class="HouseDetail_recommend__1L7WT">
        <div class="HouseDetail_houseTitle__3dg6k">猜你喜欢</div>
        <div class="HouseDetail_items__1nCaB">
          <div class="HouseItem_house__29lYP">
            <div class="HouseItem_imgWrap__3ZPoa">
              <img
                class="HouseItem_img__1BaJK"
                src="http://liufusong.top:8080/img/message/1.png"
                alt=""
              />
            </div>
            <div class="HouseItem_content__1gVhj">
              <h3 class="HouseItem_title__2dXar">安贞西里 3室1厅</h3>
              <div class="HouseItem_desc__5-mp4">72.32㎡/南 北/低楼层</div>
              <div>
                <span class="HouseItem_tag__3MxYv HouseItem_tag1__3VDnD"
                  >随时看房</span
                >
              </div>
              <div class="HouseItem_price__1_r8v">
                <span class="HouseItem_priceNum__RGpsE">4500</span> 元/月
              </div>
            </div>
          </div>
          <div class="HouseItem_house__29lYP">
            <div class="HouseItem_imgWrap__3ZPoa">
              <img
                class="HouseItem_img__1BaJK"
                src="http://liufusong.top:8080/img/message/2.png"
                alt=""
              />
            </div>
            <div class="HouseItem_content__1gVhj">
              <h3 class="HouseItem_title__2dXar">天居园 2室1厅</h3>
              <div class="HouseItem_desc__5-mp4">83㎡/南/高楼层</div>
              <div>
                <span class="HouseItem_tag__3MxYv HouseItem_tag1__3VDnD"
                  >近地铁</span
                >
              </div>
              <div class="HouseItem_price__1_r8v">
                <span class="HouseItem_priceNum__RGpsE">7200</span> 元/月
              </div>
            </div>
          </div>
          <div class="HouseItem_house__29lYP">
            <div class="HouseItem_imgWrap__3ZPoa">
              <img
                class="HouseItem_img__1BaJK"
                src="http://liufusong.top:8080/img/message/3.png"
                alt=""
              />
            </div>
            <div class="HouseItem_content__1gVhj">
              <h3 class="HouseItem_title__2dXar">角门甲4号院 1室1厅</h3>
              <div class="HouseItem_desc__5-mp4">52㎡/西南/低楼层</div>
              <div>
                <span class="HouseItem_tag__3MxYv HouseItem_tag1__3VDnD"
                  >集中供暖</span
                >
              </div>
              <div class="HouseItem_price__1_r8v">
                <span class="HouseItem_priceNum__RGpsE">4300</span> 元/月
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <van-tabbar>
      <van-tabbar-item>
        <van-button icon="star-o" type="default" class="btn">收藏</van-button>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-button type="default" class="btn">在线咨询</van-button>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-button type="primary" class="btn">电话预约</van-button>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getHomeInfo } from '@/api/search'
export default {
  name: 'houses-page',
  data() {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ],
      homeInfo: {}
    }
  },
  async created() {
    const { body } = await getHomeInfo(this.$route.params.id)
    this.homeInfo = body
  },
  methods: {
    icons(str) {
      if (str === '空调') return 'icon-kongdiao'
      else if (str === '暖气') return 'icon-shuinuanqigongcheng'
      else if (str === '热水器') return 'icon-haofangtuo400iconfont2reshuiqi'
      else if (str === '天然气') return 'icon-meiqitianranqi'
      else if (str === '电视') return 'icon-dianshiji'
      else if (str === '冰箱') return 'icon-bingxiang'
      else if (str === '洗衣机') return 'icon-xiyiji'
      else if (str === '衣柜') return 'icon-yigui'
      else if (str === '沙发') return 'icon-shafa'
      else if (str === '宽带') return 'icon-kuandai'
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  padding-bottom: 40px;
  background-color: #f6f5f6;
  .my-swipe .van-swipe-item {
    height: 252px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .HouseDetail_info {
    padding: 15px;
    background: #fff;
    .home-info {
      display: flex;
      text-align: center;
      .info {
        flex: 1;
        div {
          font-size: 18px;
          color: #fa5741;
          span {
            font-size: 12px;
          }
        }
        p {
          font-size: 14px;
          color: #999;
        }
      }
    }
    .home-info-buttom {
      display: flex;
      .info-item-div {
        flex: 1;
        display: flex;
        flex-direction: column;
        .info-item {
          flex: 1;
          font-size: 13px;
          span {
            color: #999;
            padding-right: 5px;
          }
        }
      }
    }
    .Map {
      height: 145px;
      background-color: #32b9d4;
    }
    .icon-tag {
      display: flex;
      flex-wrap: wrap;
      .icon {
        font-size: 16px;
        text-align: center;
        margin: 10px 0;
        p {
          width: 60px;
          height: 29px;
        }
      }
    }
    .HouseDetail_set__26npJ {
      margin: 10px 0;
      padding: 0 10px;
      line-height: 150%;
      background: #fff;
      .HouseDetail_houseTitle__3dg6k {
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 10px;
        padding: 15px 0;
        border-bottom: 1px solid #cecece;
      }
      .HouseDetail_contact__O_lsw {
        position: relative;
        .HouseDetail_user__TZj3w {
          margin-bottom: 10px;
          display: flex;
          img {
            width: 52px;
            height: 52px;
            margin: 10px 10px 0 0;
          }
          .HouseDetail_useInfo__FrBlz {
            padding: 15px 0 0 5px;
            .HouseDetail_userAuth__Xr6gY {
              font-size: 12px;
              color: #fa5741;
              .HouseDetail_userAuth__Xr6gY .icon-auth {
                margin-right: 5px;
              }
            }
          }
        }
        .HouseDetail_userMsg__3mcRl {
          position: absolute;
          right: 15px;
          top: 20px;
          color: #33be85;
          border: 1px solid #33be85;
          border-radius: 3px;
          padding: 3px 15px;
        }
      }
    }
    .HouseDetail_recommend__1L7WT {
      margin: 10px 0 0;
      padding: 0 15px;
      background: #fff;
      .HouseDetail_houseTitle__3dg6k {
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 10px;
        padding: 15px 0;
        border-bottom: 1px solid #cecece;
      }
      .HouseItem_house__29lYP {
        height: 120px;
        position: relative;
        box-sizing: border-box;
        justify-content: space-around;
        padding-top: 18px;
        border-bottom: 1px solid #e5e5e5;
        .HouseItem_imgWrap__3ZPoa {
          float: left;
          width: 106px;
          height: 80px;
          .HouseItem_img__1BaJK {
            width: 106px;
            height: 80px;
          }
        }
        .HouseItem_content__1gVhj {
          overflow: hidden;
          line-height: 22px;
          padding-left: 12px;
          .HouseItem_title__2dXar {
            margin: 0;
            font-size: 15px;
            color: #394043;
          }
          .HouseItem_desc__5-mp4 {
            font-size: 12px;
            color: #afb2b3;
          }
          .HouseItem_tag__3MxYv {
            display: inline-block;
            font-size: 12px;
            border-radius: 3px;
            padding: 4px 5px;
            margin-right: 5px;
            line-height: 12px;
            color: #39becd;
            background: #e1f5f8;
          }
          .HouseItem_price__1_r8v {
            font-size: 12px;
            color: #fa5741;
            .HouseItem_priceNum__RGpsE {
              font-size: 16px;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
  ::v-deep .btn {
    width: 33vw !important;
  }
  ::v-deep .title {
    background-color: #21b97a;
  }
}
</style>
